<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta
            name="viewport"
            content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <link
            rel="stylesheet"
            href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
    <title>地图显示</title>
    <style>
        html,
        body,
        #container {
          width: 100%;
          height: 100%;
        }
        input {
          width: 200px !important;
          margin: 10px;
        }
        button {
          margin-left: 10px;
        }
    </style>
</head>
<body>
<!-- <div>
  <input type="text" placeholder="您在哪儿上车？ " />
  <button class="nowBtn">定位</button>
  实战自动定位（这里单击设置假定位数据）
</div> -->

<!-- <div>
  <input type="text" placeholder="您要去哪儿？" />
  <button>确定</button>
</div> -->

<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=4eb50d5b6bc7611a7f6123683d856a25"></script>
<script>
    var map = new AMap.Map("container", {
      resizeEnable: true, //是否监控地图容器尺寸变化
      zoom: 12, //初始化地图层级
      center: [116.397428, 39.90323], //初始化地图中心点
    });

    document.querySelector(".nowBtn").onclick = () => {
      // 1、清除之前的
      map.clearMap();
      // 2 重新打点
      const marker = new AMap.Marker({
        // icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        content: `<div class="address" style="min-width:140px;text-align:center;display:flex;align-items: center;flex-direction:column">
              <div class="address-title" style="padding:10px;border-radius:100px;background:black;color:#fff;font-size:14px;">千锋教育&nbsp;&nbsp;&gt;</div>
              <div class="address-bottom" style="width:4px;height:15px;background:black;"></div>
          </div>`,
        position: [116.397428, 39.90323],
        anchor: "bottom-center",
      });
      map.add(marker);
    };
</script>
</body>
</html>
